<template>
	<view>
		<view class="web-view" >
			<mp-html v-show="!isShowWebView" style="height: auto;" :content="content_html" />
		</view>
		<view v-if="isShowWebView">
			<web-view :src="src"></web-view>
		</view>
	</view>
</template>

<script>
	import {
		getContentHomeApi, // H5链接说明
	} from '@/setupproject/INTERFACE'
	
	export default {
		name: 'webViewPage',
		data() {
			return {
				
				content_html: '',
				src: '',
				isShowWebView: false, // 是否是外链页面
				content_rule: '',
				
			}
		},
		async onLoad({
			src,
			content_rule, // 详情页内容
		}) {
			this.src = src ? decodeURIComponent(src) : '';
			this.content_rule = content_rule ? decodeURIComponent(content_rule) : '';
			
			if(this.src){
				// 微信公众号 外链页面
				await (this.isShowWebView = true);
			}else{
				// 微信小程序 短链接
				await this.configContentGetFun();
				await (this.isShowWebView = false);
			}
		
		},
		methods: {
			// 修改富文本中img、p标签样式
			richTextFormat(html){
				let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
					match = match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '').replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/\<strong/gi, '<strong style="padding-bottom:12px;display:block"');
				newContent = newContent.replace(/\<p/gi, '<p style="padding-bottom:12px;"');
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:10px 0;"');
				console.log(newContent)
				return newContent;
			},
			// 获取小程序短链接页面内容
			async configContentGetFun() {
				
				const {
					data
				} = await getContentHomeApi({
					id: this.content_rule
				});
				
				uni.setNavigationBarTitle({
				    title: data.title || ''
				});
				
				this.content_html = data.content || '';
				// this.content_html = this.richTextFormat(data.content || '');
				
			},

		}
	}
</script>

<style scoped lang="scss">
.web-view {
	overflow-y: scroll;
	background: #FFF;
	img, image {
		max-width: 100%;
	}
	video {
		max-width: 100%;
	}
}
</style>
